<template>
    <div class="case-item flex flex-none">
        <div class="case-border flex flex-auto">
            <div class="flex-auto cover">
                <img referrerpolicy="no-referrer" :src="item.img.cover" alt="" class="mc-img">
                <div class="cover-text" @click="" v-html="item.text.cover_text"></div>
            </div>
            <div class="flex-none context-info">
                <div class="project-name" v-html="item.text.title"></div>
                <div class="info">
                    <div class="text1" v-html="item.text.text1"></div>
                    <div class="line"></div>
                    <div class="text2" v-html="item.text.text2"></div>
                </div>
                <div class="diff-img">
                    <img referrerpolicy="no-referrer" :src="item.img.diff" alt="" class="mc-img">
                </div>
                <div class="name">
                    {{ item.name }}<span class="c">（{{ item.career }}）</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [ 'item' ]
    }
</script>

<style scoped lang="less">

    .case-item {
        padding: 2.5/10rem 3.15/10rem;

        .cover {
            height: 68.75/10rem;
            .cover-text {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #fa3b4b;
                color: #fff;
                font-size: 4/10rem;
                line-height: 1.6;
                text-align: center;
            }
        }

        .case-border {
            border-radius: 2/10rem;
            background-color: #fff;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(36, 37, 38, 0.18);
        }

        .context-info {
            width: 53.31%;
            text-align: center;
            padding-top: 3/10rem;

            .diff-img {
                padding: 0 3.03030303/10rem;
            }

            .project-name {
                font-size: 8/10rem;
                line-height: 1.05;
                color: #333333;
            }

            .info {
                padding-top: 1.7/10rem;
                padding-bottom: 2.5/10rem;
                .text1 {
                    color: #fa3b4b;
                    font-size: 4/10rem;
                    font-weight: bold;
                }
                .line {
                    width: 18.75/10rem;
                    height: 1px;
                    background-color: #fa3b4b;
                    margin: 1.3/10rem auto;
                }
                .text2 {
                    font-size: 3.125/10rem;
                    line-height: 1.2;
                    color: #78787a;
                }
            }
            .name {
                padding-top: 1.5/10rem;
                font-size: 3.75/10rem;
                font-weight: bold;
                color: #666666;

                span {
                    font-size: 3.125/10rem;
                    font-weight: normal;
                    vertical-align: baseline;
                }
            }

        }
    }


</style>
